﻿<cms-page-header cms-title="{{vm.customEntity.latestVersion.title}}"
                 cms-parent-title="{{::vm.options.name}}"></cms-page-header>

<cms-form cms-name="mainForm"
          cms-edit-mode="vm.editMode"
          cms-loading="vm.formLoadState.isLoading"
          ng-submit="vm.save()">

    <!-- Default toolbar -->
    <cms-page-actions ng-show="!vm.editMode">

        <cms-button class="main-cta"
                    cms-text="Edit"
                    ng-click="vm.edit()"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="::vm.canUpdate"></cms-button>

        <cms-button-link cms-text="Browse to page"
                         cms-icon="eye-open"
                         cms-href="{{vm.customEntity.fullPath}}"
                         ng-if="vm.customEntity.fullPath"></cms-button-link>

        <cms-button cms-text="Publish"
                    ng-click="vm.publish()"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="!vm.options.autoPublish && (!vm.isMarkedPublished || vm.customEntity.hasDraftVersion) && vm.canPublish"></cms-button>

        <cms-button cms-text="Unpublish"
                    ng-click="vm.unpublish()"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="!vm.options.autoPublish && vm.isMarkedPublished && vm.canPublish"></cms-button>

        <cms-button cms-text="Change Url"
                    ng-click="vm.changeUrl()"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="vm.canChangeUrl && vm.canUpdateUrl"></cms-button>

        <cms-button cms-text="Duplicate"
                    ng-if="::vm.canCreate"
                    ng-click="vm.duplicate()"
                    ng-disabled="vm.editMode || vm.globalLoadState.isLoading"></cms-button>

        <cms-button cms-text="Delete"
                    ng-click="vm.deleteCustomEntity()"
                    ng-disabled="vm.globalLoadState.isLoading"
                    ng-if="::vm.canDelete"></cms-button>

    </cms-page-actions>

    <!-- Edit mode toolbar -->
    <cms-page-actions ng-show="vm.editMode">

        <cms-button-submit class="main-cta"
                           cms-text="Save Draft"
                           cms-loading="vm.saveLoadState.isLoading"
                           ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                           ng-if="::!vm.options.autoPublish"></cms-button-submit>

        <cms-button cms-text="{{::vm.saveButtonText}}"
                    cms-loading="vm.saveAndPublishLoadState.isLoading"
                    ng-click="vm.saveAndPublish()"
                    ng-disabled="vm.mainForm.$invalid || vm.globalLoadState.isLoading"
                    ng-if="::vm.canPublish"></cms-button>

        <cms-button cms-text="Cancel"
                    ng-click="vm.cancel()"
                    ng-disabled="vm.globalLoadState.isLoading"></cms-button>
    </cms-page-actions>

    <!-- Scrollable content area -->
    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--Main-->
        <cms-form-section cms-title="Main">

            <cms-form-field-text required
                                 maxlength="200"
                                 cms-title="{{::vm.options.terms['title']}}"
                                 cms-model="vm.updateCommand.title"></cms-form-field-text>

            <cms-form-field-readonly cms-title="Market"
                                     cms-model="vm.customEntity.locale.ietfLanguageTag"
                                     ng-if="::vm.options.hasLocale"></cms-form-field-readonly>

            <cms-form-field-container cms-title="Url" ng-if="vm.customEntity.fullPath">
                <a ng-href="{{vm.customEntity.fullPath}}">{{vm.customEntity.fullPath}}</a>
            </cms-form-field-container>

            <cms-form-field-readonly cms-title="Published Status"
                                     cms-model="vm.publishStatusLabel"
                                     ng-if="!vm.options.autoPublish"></cms-form-field-readonly>

            <cms-form-field-container cms-title="Publish Date" 
                                      ng-if="!vm.options.autoPublish">
                <span ng-if="vm.customEntity.publishDate">{{vm.customEntity.publishDate | date:'fullDate'}} at {{vm.customEntity.publishDate | date:'HH:mm:ss'}}</span>
                <span ng-if="!vm.customEntity.publishDate">Not set</span>
            </cms-form-field-container>

        </cms-form-section>

        <!--DYNAMIC DATA-->

        <cms-form-section cms-title="Properties" ng-if="vm.formDataSource.modelMetaData.dataModelProperties">
            <cms-form-dynamic-field-set cms-data-source="vm.formDataSource"
                                        cms-additional-parameters="vm.additionalParameters">

            </cms-form-dynamic-field-set>
        </cms-form-section>

        <!-- DETAILS PAGES -->

        <div ng-repeat="page in vm.customEntity.latestVersion.pages">

            <cms-form-section cms-title="Template: {{page.pageRoute.title}}">
                <cms-form-section-actions>
                    <cms-button-link cms-text="Manage in Visual Editor"
                                     ng-if="::vm.canUpdate && page.regions.length"
                                     cms-icon="eye-open"
                                     ng-show="!vm.editMode"
                                     cms-href="{{vm.urlLibrary.customEntityVisualEditor(page, true)}}"></cms-button-link>
                </cms-form-section-actions>

                <div class="form-section-message" ng-if="!page.regions.length">
                    <p>This template has no managed content</p>
                </div>

                <div ng-if="page.regions.length > 0 && vm.editMode">
                    <p>Page content is edited in the visual editor.</p>
                </div>


                <cms-form-field-container>

                    <cms-table-container ng-if="page.regions.length > 0">

                        <table>
                            <tbody ng-repeat="region in page.regions">
                                <tr>
                                    <th colspan="2">
                                        <cms-table-group-heading>Region: {{region.name}}</cms-table-group-heading>
                                    </th>
                                </tr>

                                <tr ng-if="!region.blocks.length">
                                    <td colspan="2">No content</td>
                                </tr>

                                <tr ng-repeat="block in region.blocks">
                                    <td>{{block.blockType.name}}</td>
                                    <!--<td>{{block.blockType.description}}</td>-->
                                    <td class="row-type" style="width:30px; text-align:center;">
                                        <!--TODO: Action-->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </cms-table-container>
                </cms-form-field-container>
            </cms-form-section>
        </div>



        <!--VERSIONS-->

        <cms-form-section cms-title="Versions"
                          ng-if="!vm.options.autoPublish">
            <cms-form-field-container>

                <cms-table-container>

                    <table>
                        <thead>
                            <tr>
                                <th>Version</th>
                                <th class="lowPriority">Created</th>
                                <th cms-table-column-actions
                                    ng-show="!vm.editMode">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="version in vm.versions.items">
                                <td>
                                    {{::version.versionLabel}}
                                </td>
                                <td class="lowPriority">
                                    <cms-table-cell-created-audit-data cms-audit-data="::version.auditData"></cms-table-cell-created-audit-data>
                                </td>
                                <td cms-table-column-actions ng-show="!vm.editMode">
                                    <span ng-if="version.workFlowStatus == 'Draft'">
                                        <span ng-if="vm.versions.items.length > 1 && vm.canUpdate">
                                            <a href=""
                                               class="btn-icon"
                                               title="Discard"
                                               ng-click="vm.loading || vm.discardDraft()">
                                                <i class="fa fa-trash-o"></i>
                                            </a>
                                        </span>
                                        <a href=""
                                           class="btn-icon"
                                           title="Publish"
                                           ng-if="::vm.canPublish"
                                           ng-click="vm.loading || vm.publish(vm.customEntity.customEntityId)">
                                            <i class="fa fa-cloud-upload"></i>
                                        </a>
                                    </span>
                                    <span ng-if="version.isLatestPublishedVersion">
                                        <a href=""
                                           class="btn-icon"
                                           title="Un-publish"
                                           ng-if="vm.isMarkedPublished && vm.canPublish"
                                           ng-click="vm.loading || vm.unpublish()">
                                            <i class="fa fa-cloud-download"></i>
                                        </a>
                                    </span>
                                    <span ng-if="!version.isLatestPublishedVersion && version.workFlowStatus == 'Published'">
                                        <a href=""
                                           class="btn-icon"
                                           title="Copy to draft"
                                           ng-if="vm.canUpdate"
                                           ng-click="vm.loading || vm.copyToDraft(version)">
                                            <i class="fa fa-files-o"></i>
                                        </a>
                                    </span>
                                    <a href="{{version.browseUrl}}"
                                       class="btn-icon"
                                       title="Browse to page: {{::version.versionLabel}}"
                                       target="_blank"
                                       ng-if="::version.browseUrl">
                                        <i class="fa fa-external-link"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </cms-table-container>

                <cms-pager cms-result="vm.versions"
                           cms-query="vm.versionsQuery"></cms-pager>

            </cms-form-field-container>
        </cms-form-section>

        <!--AUDIT DATA-->
        <cms-form-section-audit-data cms-audit-data="vm.customEntity.auditData"></cms-form-section-audit-data>

    </cms-page-body>

</cms-form>


